<template>
  <tn-form class="form" :model="value" ref="form" :errorType="['message']" :labelWidth="labelWidth">
    <tn-form-item v-for="item in listComputed" :key="item.label" :label="item.label" :prop="item.prop"
                  :labelWidth="item.labelWidth" :labelPosition="item.labelPosition">


      <!--下拉列表-->
      <input-select v-if="item.type === 'select'" v-model="value[item.prop]" :list="item.dicData"
                    @change="(e)=>{zhiyeClick(e, item.prop);if(item.fn)item.fn(e)}" :keyValue="item.props"/>

      <!--多选-->
      <input-multiple v-else-if="item.type === 'multiple'" :list="item.dicData" v-model="value[item.prop]"
                      :keyValue="item.props">
      </input-multiple>


      <!--桩号-->
      <input-mileage v-else-if="item.type==='mileage'"
                     :start-value="value[item.prop]"
                     :end-value="value[item.prop2]"
                     @update:startValue="value[item.prop] = $event"
                     @update:endValue="value[item.prop2] = $event"
      />
      <!--时间 yy年mm月dd日-->
      <view v-else-if="item.type === 'date'" style="position:relative;width: 100%;">
        <uni-datetime-picker
            style="position: absolute;width: 100%;top: -32rpx;"
            :ref="'time'+item.prop"
                            :type="item.type"
                             :clearIcon="item.clearable" :border="false"
                             placeholder="请选择时间"
                             v-model="value[item.prop]"
        @change="reloadTime">
        </uni-datetime-picker>
        <view style="min-height: 70rpx;width: 100%;position: absolute;top: -32rpx;background: white;" v-if="datatimeReload" @click="showDatetimePicker(item.prop)">{{ getFormateTime(value[item.prop]) }}</view>
      </view>

      <!--   日期 yyyy-mm-dd hh:ss:mm   -->
      <view v-else-if="item.type === 'datetime'">
        <uni-datetime-picker type="datetime" :border="false" :clearIcon="item.clearable" placeholder="请选择时间" v-model="value[item.prop]" />
      </view>


      <!--文本域-->
      <tn-input v-else-if="item.type === 'textarea'" type="textarea" v-model="value[item.prop]"/>


      <!--插槽-->
      <view v-else-if="item.type==='slot'" style="flex: 1">
        <slot :name="item.prop"></slot>
      </view>

      <!--   签名   -->
      <image v-else-if="item.type==='signBoard'" class="signImg" @click="jupmSign(item.prop, item.fn);"
             :src="value[item.prop]"
             mode=""></image>


      <!--上传图片-->
      <tn-image-upload v-bind="$attrs" :beforeUpload="beforeUpload" @on-success="onSuccess"
                       v-else-if="item.type==='uploadImg'" :ref="item.prop" :header="header"
                       :action="action"></tn-image-upload>


      <!--输入框-->
      <view v-else class="tn-flex tn-col-12">
        <tn-input v-model="value[item.prop]"/>
        <!--单位-->
        {{ item.unit }}
      </view>


      <!--备注-->
      <view v-if="item.mark" class="tn-padding-left-sm" @click="open(item.mark)">
        <text class="tn-icon-tip"></text>
      </view>
    </tn-form-item>
    <!--备注提示-->
    <tn-tips ref="tips" position="bottom"></tn-tips>


  </tn-form>
</template>

<script>
import InputSelect from "@/components/inputSelect.vue";
import InputMileage from "@/components/inputMileage.vue";
import InputMultiple from "./inputMultiple.vue";
import config from "@/config";
import {getToken} from "@/utils/auth";
import {toast} from "@/utils/common";
import {formatDate_dayjs} from "@/utils/formatData";

export default {
  components: {InputMultiple, InputMileage, InputSelect},
  props: {
    labelWidth: {
      type: Number,
      default: 180
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    rules:{}
  },
  computed: {
    listComputed() {
      return this.list.filter(item => !item.hidden)
    }
  },
  data() {
    return {
      datatimeReload: true,
      timer: null,
      action: config.baseUrl + '/exam/common/api/file/uploadLp',
      header: {
        token: getToken()
      },
    }
  },
  methods: {
    // 时间组件逻辑 格式化 年月日
    getFormateTime(val) {
      if (val) {
        return formatDate_dayjs(val, 'YYYY-MM-DD', 'YYYY年MM月DD日')
      }
      return val
    },
    reloadTime() {
      this.datatimeReload = false
      setTimeout(() => {
        this.datatimeReload = true
      })
    },
    showDatetimePicker(val){
      this.$refs['time'+val] && this.$refs['time'+val][0].show()
    },
    // 签名
    jupmSign(name, fn) {
      uni.navigateTo({
        url: '/pages/signBoard/signBoard?name=' + name,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            this.$emit(`${data.name}Change`, data.data);
            if (fn) {
              fn(data.data);
            }
          }
        }
      });
    },
    open(msg) {
      this.$refs.tips.show({
        msg,
        // backgroundColor: '#E83A30',
        fontColor: '#FFFFFF',
        duration: 5000
      })
    },
    zhiyeClick(val, name) {
      console.log('val', val)
      console.log('name', name)
      this.$emit(`${name}Change`, val)
    },
    beforeUpload() {
      this.timer = setTimeout(() => {
        uni.showLoading({
          title: '上传中'
        })
      }, 500)
    },
    onSuccess() {
      clearTimeout(this.timer)
      toast('图片上传成功')
    }
  },
  mounted() {
    if(this.rules){
      this.$refs.form.setRules(this.rules);
    }
  },
}
</script>


<style scoped lang="scss">
.form {
  ::v-deep {
    .tn-form-item--left__content__label {
      font-weight: 700;
    }
  }
}
</style>
